<template>
  <div id="app">
    <transition :name="transitionName">   
      <router-view :style="{'opacity':opacity}" class="router-view"></router-view>
    </transition>
    <navigation @navClick="navClick"></navigation>
    <message-envelope @close="close"></message-envelope>
  </div>
</template>
<script>
import Navigation from './components/Navigation.vue'
import MessageEnvelope from './components/MessageEnvelope.vue'
export default {
  components:{
    Navigation,
    MessageEnvelope
  },
  data(){
      return {
          transitionName:'',
          opacity:0,
      }
  },
  methods:{
    navClick(bool) {
      console.log(bool);
      if(bool){
        //设置动画名称
        this.transitionName = 'slide-left';
      }else{
        this.transitionName = 'slide-right';
      }
    },
    close(){
      let time = setInterval(()=>{
        if (this.opacity > 1){
          clearInterval(time)
        }
        this.opacity += 0.02
      },20)
    }
  },
}
</script>
<style lang="scss">
*{
  margin: 0;
  padding: 0;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
.router-view{
  width: 100%;
  position: absolute;
  -webkit-transition: all .3s cubic-bezier(.55,0,.1,1);
  -moz-transition: all .3s cubic-bezier(.55,0,.1,1);
  -ms-transition: all .3s cubic-bezier(.55,0,.1,1);
  -o-transition: all .3s cubic-bezier(.55,0,.1,1);
  transition: all .3s cubic-bezier(.55,0,.1,1);
  height:100%;
 }
.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
  will-change: transform;
  transition: all 500ms;
  position: absolute;
}
.slide-right-enter {
  opacity: 0;
  transform: translate3d(0, -100%, 0);
}
.slide-right-leave-active {
  opacity: 0;
  transform: translate3d(0, 100%, 0);
}
.slide-left-enter {
  opacity: 0;
  transform: translate3d(0, 100%, 0);
}
.slide-left-leave-active {
  opacity: 0;
  transform: translate3d(0, -100%, 0);
}

::-webkit-scrollbar {
  width: 6px;
  display: none;
  border-radius: 6px;
} /* 这是针对缺省样式 (必须的) */
::-webkit-scrollbar-track {
  background-color: #f1f1f1;
} /* 滚动条的滑轨背景颜色 */

::-webkit-scrollbar-thumb {
  background-color: #c1c1c1;
} /* 滑块颜色 */

::-webkit-scrollbar-button {
  width: 0;
  height: 0;
  background-color: #7c2929;
} /* 滑轨两头的监听按钮颜色 */

::-webkit-scrollbar-corner {
  background-color: black;
} /* 横向滚动条和纵向滚动条相交处尖角的颜色 */
</style>
